<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets" template="/home.xhtml">
	
	<ui:define name="corpo">
		
		<h:form id="form" prependId="false">
			<p:panel header="Área do Paciente" style="background: #dbfbda;font-size:15px;min-height:700px;margin-top:10px;float:left;width:99%">
				<h:panelGroup style="float: left;width:250px;" layout="block">
					<ui:include src="menu_esquerda.xhtml" />	
				</h:panelGroup>
				
				<h:panelGroup layout="block" style="float:left">
					<p:panel header="Próximas consultas" style="width:680px">
						<h:panelGroup layout="block">

							<p:spacer height="15" />
							<h:panelGroup layout="block">
								<p:dataTable id="tabelaConsultasMarcadas" value="#{marcacaoConsultaPacienteBean.consultasMarcadas}" selectionMode="single" var="entity" paginator="true" rows="10" emptyMessage="Não há consultas marcadas"
							                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" 
							                 paginatorPosition="bottom">
							    	<f:facet name="header">
							    		<h:panelGroup layout="block" style="text-align:left">
							    			<h:outputText value="Minhas Consultas" />
							    		</h:panelGroup>							    		
							    	</f:facet>
							    	
								    <p:column>

										<h:panelGroup layout="block" style="width:500px;">
	
											<h:panelGroup style="float:left">
												<h:outputText value="#{entity.medico.nome}" style="font-size:14px;font-weight:bold;color:#656765" />
												<br />
												<h:outputText value="CRM: " styleClass="fmtCampoConsulta"/>
												<h:outputText value="#{entity.medico.crm}" />
												<br />
												<h:outputText value="E-mail: " styleClass="fmtCampoConsulta" />
												<h:outputText value="#{entity.medico.email}" style="font-style: italic;" />
											</h:panelGroup>
											
											<h:panelGroup style="float:right">
												<h:outputText value="Data da consulta: " styleClass="fmtCampoConsulta" />
												<h:outputText value="#{entity.dataConsulta}">
													<f:convertDateTime pattern="dd/MM/yyyy" locale="pt_BR" timeZone="GMT-3" />
												</h:outputText>
												<br />
												<h:outputText value="Horário: " styleClass="fmtCampoConsulta" />
												<h:outputText value="#{entity.dataConsulta}">
													<f:convertDateTime pattern="HH:mm" locale="pt_BR" timeZone="GMT-3" />
												</h:outputText>
												<br />
												<p:commandLink rendered="#{entity.flagAtendido eq 'N'}" update="formInfoCancelaConsulta" action="#{marcacaoConsultaPacienteBean.carregarConsulta(entity)}" oncomplete="dialogInfoConsulta.show();" value="Cancelar consulta" style="color:#41B43C;font-weight:bolder" />
												
											</h:panelGroup>
											
										</h:panelGroup>
									</p:column>
							    	
							    	             
				                </p:dataTable>
							</h:panelGroup>
						</h:panelGroup>
						<p:spacer height="15" />
					</p:panel>
				</h:panelGroup>
			</p:panel>			
		</h:form>
		
		<p:dialog header="Informação" widgetVar="dialogInfoConsulta" resizable="false" modal="true" width="320" showEffect="clip" hideEffect="fold">
			<h:form id="formInfoCancelaConsulta" prependId="false">
				<h:panelGroup layout="block" id="pnlInfo" style="text-align:center" rendered="#{!empty marcacaoConsultaPacienteBean.form.consultaModal}">
					
					<h:outputText value="Atenção" style="color:#DBD40D;font-weight:bold;font-size:14px" />
					<br />
					<h:outputText style="font-size:10px" value="Fique atento ao dia da consulta, pois caso ocorra algum imprevisto, ela poderá ser cancelada 24 horas antes do atendimento."  />
					<br />
					<br />
					<h:panelGroup layout="block" style="border:dashed 1px #DC5404" rendered="#{!marcacaoConsultaPacienteBean.verificaCancelaConsulta(marcacaoConsultaPacienteBean.form.consultaModal.dataConsulta)}">
						<br />
						<h:outputText value="Deseja cancelar a consulta de " />
						<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaModal.medico.areaMedica.areaMedica}" />
						<h:outputText value=" no dia " />
						<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaModal.dataConsulta}" style="color:#DC5404;font-weight:bold">
							<f:convertDateTime pattern="dd/MM/yyyy" locale="pt_BR" timeZone="GMT-3" />
						</h:outputText>
						<h:outputText value=" às " />
						<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaModal.dataConsulta}" style="color:#DC5404;font-weight:bold">
							<f:convertDateTime pattern="HH:mm" locale="pt_BR" timeZone="GMT-3" />
						</h:outputText>
						<h:outputText value=" ?" />
						<br />
						<br />
						<p:commandButton style="font-size:11px" value="Sim" action="#{marcacaoConsultaPacienteBean.cancelarMarcacaoConsulta}" oncomplete="dialogInfoConsulta.hide();modalMsgConfirmacao.show();" update="formMsgConfirmacao" />
						<p:commandButton style="font-size:11px" value="Não" onclick="dialogInfoConsulta.hide();" />
						<br />
						<br />
					</h:panelGroup>
					
					<h:panelGroup layout="block" style="border:dashed 2px #DC5404" rendered="#{marcacaoConsultaPacienteBean.verificaCancelaConsulta(marcacaoConsultaPacienteBean.form.consultaModal.dataConsulta)}">
						<br />
						<h:outputText value="A consulta não poderá ser cancelada devido a faltarem apenas #{marcacaoConsultaPacienteBean.form.qtdHoras} horas, ficando abaixo das 24 horas permitidas para cancelamento" style="color:#DC5404" />
						<br />
						<br />
						<p:commandButton value="OK" style="font-size:11px" onclick="dialogInfoConsulta.hide()" />
						<br />
						<br />	
					</h:panelGroup>
				</h:panelGroup>
				
				
			</h:form>
		</p:dialog>
		
		<p:dialog header="Aviso" widgetVar="modalMsgConfirmacao" resizable="false" modal="true" width="320" showEffect="clip" hideEffect="fold">
			<h:form id="formMsgConfirmacao" prependId="false">
				<h:panelGroup layout="block" id="pnl" style="text-align:center">
					<h:outputText value="#{marcacaoConsultaPacienteBean.form.consultaCancelada ? 'Consulta cancelada com sucesso, entraremos em contato para confirmar!' : 'Erro, entre em contato com o administrador!'}" styleClass="#{marcacaoConsultaPacienteBean.form.consultaCancelada ? 'sucesso_consulta' : 'erro_consulta'}" />
					<br />
					<br />
					<p:commandButton value="OK" update="tabelaConsultasMarcadas" action="#{marcacaoConsultaPacienteBean.buscarConsultas}" oncomplete="modalMsgConfirmacao.hide();"  />
				</h:panelGroup>
			</h:form>
		</p:dialog>
		
	</ui:define>
</ui:composition>